<template>
  <a-form
    ref="formRef"
    :model="formState"
    :label-col="{ span: 2 }"
    autoComplete="off"
    class="zigezhengshu"
    :rules="rules"
  >
    <a-form-item label="职业资格" name="professionalIdArray">
      <a-tree-select
        show-search
        style="width: 500px"
        v-model:value="formState.professionalIdArray"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="请选择证书"
        allow-clear
        multiple
        tree-default-expand-all
        size="large"
        :filterTreeNode="filterTreeNode"
        :treeData="treeProfessionalIdArray"
        :field-names="{
          children: 'children',
          label: 'name',
          value: 'id',
        }"
      >
      </a-tree-select>
    </a-form-item>
    <a-form-item label="证书名称" name="certs">
      <a-tree-select
        show-search
        style="width: 500px"
        v-model:value="formState.certs"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="请选择证书"
        allow-clear
        multiple
        tree-default-expand-all
        size="large"
        :filterTreeNode="filterTreeNode"
        :treeData="treeData"
        :field-names="{
          children: 'children',
          label: 'name',
          value: 'id',
        }"
      >
      </a-tree-select>
    </a-form-item>

    <a-col :span="24" class="btn-box">
      <a-form-item>
        <a-button size="large" @click="emit('close')">取消</a-button>
        <a-button size="large" type="primary" @click="onhandleSubmit"
          >保存</a-button
        >
      </a-form-item>
    </a-col>
  </a-form>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import ResumeService from '@/api/resume';
import { message } from 'ant-design-vue';
import { array2Tree, disabledTreeData } from '@/utils/util';
import _ from 'lodash';
const rules = {
  certs: {
    type: 'array',
    max: 10,
    message: '请选择证书，最多选择10个证书',
  },
};

const defaultFormState = {
  certs: [] as any,
  professionalIdArray: [] as any,
};

const props = defineProps<{
  value: any;
  value2: any;
}>();
const emit = defineEmits(['finish', 'close']);
const formRef = ref();
const treeData = ref();
const treeProfessionalIdArray = ref();
const formState = reactive(defaultFormState);

async function initData() {
  const resp = await ResumeService.selectCertificateListFromRedis();
  if (resp.code === 200) {
    const a = resp.data || [];
    const data = array2Tree(a, '0');
    disabledTreeData(data);
    treeData.value = data;
  }
  const resp2 = await ResumeService.selectProfessionalList();
  if (resp.code === 200) {
    treeProfessionalIdArray.value = resp2.data;
  }
}

function filterTreeNode(input: string, treeNode: any) {
  return treeNode.props.title.indexOf(input) > -1;
}

function initFormData() {
  if (props.value?.length) {
    formState.certs = props.value.map((t: any) => t.cert);
  }
  if (props.value2?.length) {
    formState.professionalIdArray = props.value2.map(
      (t: any) => t.professionalId,
    );
  }
}

const onhandleSubmit = _.debounce((key: any) => {
  onSubmit();
}, 500);

async function onSubmit() {
  try {
    await formRef.value?.validate();
    const params = formState.certs;
    const params2 = formState.professionalIdArray;
    const resp = await ResumeService.addSeekerCertificate(params);
    const resp2 = await ResumeService.addSeekerProfessional(params2);
    if (resp.code === 200 && resp2.code === 200) {
      message.success('操作成功');
      emit('finish');
    } else {
      message.error(resp?.msg || '操作失败');
    }
  } catch (error) {
    console.log(error);
  }
}

onMounted(async () => {
  await initData();
  initFormData();
});
</script>

<style lang="less" scoped>
.zigezhengshu {
  background-color: #f3f3f5;
  padding-top: 24px;
  padding-bottom: 8px;
  // margin-bottom: 50px;
  .btn-box {
    padding-top: 8px;
  }
}
</style>
